<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章列表</title>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>

</head>
<body>
<div id="app">
    <h2>文章列表</h2>
    <table border="1" cellpadding="1" cellspacing="0" style="text-align: center">
        <thead>
        <tr>
			<td>文章编号</td>
			<td>标题</td>
			<td>作者编号</td>
			<td>发表日期</td>
			<td>审核状态</td>
		</tr>
        </thead>

        <tbody v-for="element in users" >
        <tr v-show="flag">{{element.title}}</tr>
        <tr @mouseover="flag=true" @mouseleave="flag=false">

            <td>{{element.id}}</td>
            <td>{{element.title}}</td>
            <td>{{element.authorid}}</td>
            <td>{{element.createtime}}</td>
            <td v-if="element.state == 0">审核通过</td>
            <td v-else-if="element.state == 1">未审核</td>
            <td v-else>审核未通过</td>
        </tr>
        </tbody>
    </table>
</div>
</body>

<script>
    new Vue({
        el:"#app",
        data:{
            users:[],
            flag: false
        },
        created(){
            this.findAllArticle();
        },
        methods:{
            findAllArticle(){
                // 发送ajax请求来获得数据，并给Vue数据模型users赋值
                // axios
                axios.get("http://localhost:8000/api/article/").then(resp=>{
                    // resp 是axios对响应内容的封装
                    // resp.data 就可以获得服务端的数据
                    console.log(resp);
                //数据模型users赋值
                this.users = resp.data;
            })
            }
        },
        hi(){
            this.flag = true
        },
        qu(){
            this.flag = false
        }


    });

</script>
</html>